
@red: #EF354A; //主题红
@pinkred:#FF979B;
html,body{
  padding:0;
  margin:0;
  font-size:12px;
  overflow-x: hidden;

}

.block{
  display: block;
  overflow: auto;
  width:100%;
}
.hide{
  display: none !important;
}

p,ul,li{
  paddign:0;
  margin:0;
}
a{
  text-decoration-line: none;
}

input{
  outline: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-modify: read-write-plaintext-only;
  -webkit-tap-highlight-color:transparent;
}
@menu-height:50px;

.menu-container{
  position:fixed;
  bottom:0;
  width:100%;
  height:@menu-height;
  display: flex;
  background:#fff;
  border-top:1px solid #EEEEEE;
  text-align: center;
  padding:10px 0;
  p,img{
    display: block;
    margin:2px auto;
  }
  img{

    width:6vw;
  }


  .menu{
    color:#999999;
    flex:1;
    text-align: center;
  }

  .activate{
    color:#000;
  }

}


.container{
  width:85vw;
  margin:auto;
}
.flex{
  display: flex;
}
.flex1{
  flex:1;
}
.dialog{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  background:rgba(0,0,0,.7);

  .msg-box{
    width:65%;
    margin:auto;
    background:#fff;
    border-radius: 1rem;
    padding:2rem;
  }

  .msg{
    font-size:1.1rem;
    text-align: center;
    padding-bottom:2rem;
    color:@red;
  }
  .btn{
    display: flex;
    span{
      flex:1;
      margin:0 1rem;
      display: inline-block;
      line-height:3;
      text-align: center;
      border-radius: 1.5rem;
      padding:0 .5rem;
    }
    .no{background:#EDEDED;}
    .yes{background:@red;color:#fff;}
  }
}

.page-index{

  .icon-card{background-image:url('../images/static/icon-g-card.png');}
  .icon-pass{background-image:url('../images/static/icon-g-pass.png');}

  .framework{

    box-shadow:1px 1px 10px 2px #ccc;
    border-radius: 1rem;
    //box-shadow: 0 2px 6px 0 rgba(0,0,0,.2);
    display: block;
    z-index: 100;
    padding:2rem;
    margin:2rem 0;

  }



  .title{
    font-size:1.2rem;
    line-height:2;
  }


  .box{
    margin-top:3vw;
    border-radius:5px;
    padding:5px 10px;
    background:#F6F6F6;
  }


  .input{
    display: flex;

    .icon{
      width:8vw;
      background-size:60%;
      background-position: center;
      background-repeat: no-repeat;
    }

    input{
      background:#F6F6F6;
      border:none;
      margin-left:5px;
      text-indent: 5px;
      color:#666666;
      border:none;
      flex:1;
      line-height:30px;
    }
  }

  .framework .btn{
    text-align: center;
    margin-top:3rem;
    button{
      width:50%;
      line-height:2.5;
      font-size:1.3rem;
      border:none;
      color:#fff;
      background:@red;
      border-radius: .5rem;
    }
  }

  a.tel{
    text-align: right;
    color:@red;
    display: block;
    margin-top:4rem;
  }
}

.page-exchange{


  .icon-time{background-image:url('../images/static/icon-time.png');}
  .icon-address{background-image:url('../images/static/icon-address.png');}
  .icon-user{background-image:url('../images/static/icon-user.png');}
  .icon-mobile{background-image:url('../images/static/icon-mobile.png');}
  .icon-note{background-image:url('../images/static/icon-note.png');}
  .icon-code{background-image:url('../images/static/icon-code.png');}

  .box{
    border:2px solid @pinkred;
    margin-top:4vw;
    border-radius:5px;
    padding:5px 10px;
  }

  .input{
    display: flex;

    .icon{
      width:7vw;
      height:30px;
      background-size:70%;
      background-position: center;
      background-repeat: no-repeat;
    }

    input{
      margin-left:5px;
      text-indent: 5px;
      border:none;
      flex:1;
      line-height:30px;
      color:@red;
      font-size:1.2rem;
      padding:0;
    }
    input::-webkit-input-placeholder {
      color:@red;
      font-size:1.2rem;
    }

    .select{
      background-image: url("../images/static/icon-select.png");
      background-position: right;
      background-size:1rem auto;
      background-repeat: no-repeat;
      margin-right:.7rem;
    }

    .codebtn{

      vertical-align: middle;
      span{
        display: inline-block;
        vertical-align: middle;
        line-height:20px;
        margin-top:5px;
        padding:0 8px;
        border-radius: 3px;
        font-size:.8rem;
        color:#fff;
      }
      .valid{
        background:@red;
      }

      .invalid{
        background:#ccc;
      }
    }
  }
  //产品信息
  .goods{
    margin:10px;
    color:@red;
    .g-title{
      font-size:1.5rem;
      span{
        font-size:0.8rem;
        color: @pinkred;
      }
    }

    .g-detail{
      background:#F6F6F6;
      padding:0.7rem;
      padding-right:0;
      margin-top:1rem;
    }


    .g-content{
      display: flex;
      .g-img{
        text-align: center;
        width:5rem;
        display: flex;
        flex-direction: column;
        img{
          width:100%;
          height:auto;
        }
      }

      .g-desc{
        flex:1;
        overflow: scroll;
        margin-left:1rem;
        p{
          padding:0;
          margin:0;
          line-height:1.5rem;
        }
        .t{
          font-size:1.3rem;
        }
        span{
          font-size:.8rem;
          margin-left:5px;
          color:@pinkred;
        }
        .b{
          color:#666666;
        }
      }
    }
    .g-btn{
      text-align: right;
      margin-top:.8rem;
      margin-right:1rem;
      a{
        display: inline-block;
        padding:0 1rem;
        background:#FA535A;
        color:#fff;
        line-height:2.3;
        text-align: center;
        border-radius: 5rem;
        font-size:0.9rem;
      }
    }
  }
  //规则说明
  .rule{
    color:@red;
    p{
      padding:0;
      margin:0;
      line-height:30px;
    }
    a{
      color:@red;
      text-decoration-line: none;
    }
    .big{
      font-weight:bold;
    }
  }

  //提交按钮
  .btns{
    padding:0 10%;
    display: flex;
    margin:20px 0;
    margin-bottom:7rem;
    div{
      width:10%;
    }
    .btn{

      text-decoration-line: none;
      flex:1;
      text-align:center;
      border:2px solid @pinkred;
      border-radius:5px;
      height:3.5rem;
      line-height:3.5rem;
      padding:0;
    }

    a{
      color:@red;
      background:#fff;
    }

    button{
      color:#fff;
      background:#FA535A;
      border:2px solid #FA535A !important;

    }
  }
}


//门店选择
.float-container{
  position: fixed;
  z-index: 100;
  height:100vh;
  width:100vw;
  top:0;
  left:0;
  display: flex;
  flex-direction: column;
  overflow: scroll;

  .empty{
    flex:1;
    background:rgba(0,0,0,.7);
  }

  .float-content{
    background:#fff;
    padding:1.5rem;
  }

  .title{
    font-size:1.8rem;
    margin-bottom:1rem;
    color:#333333;
  }


  //地址容器
  .address-box{

    .add-list{
      background:#F6F6F6;
      padding:1rem;
      margin-bottom:1rem;
      display: flex;
    }

    .check-btn{
      display: flex;
      flex-direction: column;
      p{
        flex:1;
      }

      span{
        display: inline-block;
        width:1rem;
        height:1rem;
        background:#CCCCCC;
        border-radius: 100%;;
        vertical-align: middle;
      }

      span.active{
        background:@red;
      }
    }

    .detail-box{
      margin-left:1rem;
      flex:1;
      color:#666666;

      .add-name{
        display: flex;
        height:2rem;
        line-height:2rem;
        padding:0;
        margin:0;
        margin-bottom:1rem;
        span:nth-child(1){
          font-size:1.3rem;
          color:#222;
          flex:1;

        }

        span:nth-child(2){
          color:@red;
          line-height:2.5rem;
        }
      }
    }
  }



  //日期容器
  .date-box{

    .nav{
      color:@red;
      display: flex;
      .left{background-image:url('../images/static/icon-left.png');}
      .right{background-image:url('../images/static/icon-right.png');}
      .right,.left{
        background-size:1rem auto;
        background-position: center;
        background-repeat: no-repeat;
        width:3rem;
      }

      .middle{
        line-height:2;
        flex:1;
        text-align: center;
        font-size:1.5rem;
        color:#F0384C;
      }
    }

    .calendar{
      width:100%;
      line-height:1.8;
      font-size:1.1rem;
      text-align: center;
      .invalid{
        color:#ccc;
      }
      .activate{
        background-image:url("../images/static/icon-dot.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size:50% auto;
        color:#fff;
      }
    }
  }

  .line{
    position: relative;
    height:1rem;
    margin:1rem 0;
    p{
      position:absolute;
      width:100vw;
      left:-1.5rem;
      height:100%;
      background:#F2F2F2;
    }
  }
  .time-box{

    .time-container{
      background:#F6F6F6;
      border-radius: .8rem;
      margin-bottom:1rem;
      overflow: hidden;
    }

    .stage{
      display: flex;

      p{
        background:#EDEDED;
        flex:1;
        color:#000;
        line-height:2.5;
        font-size:1.2rem;
        text-align:center;
      }
      .active{
        background:rgba(0,0,0,0);

      }
    }

    .hours {
      overflow: hidden;
      padding:.6rem 0;
      div{
        width:25%;
        float:left;
        padding:.5rem 0;
        text-align: center;

        p{
          text-align:center;
          margin:auto;
          line-height:1.8;
          display: inline-block;
          padding:.2rem .8rem;
        }

        &.active p{
          background:#FF535A;
          color:#fff;
          border-radius: 3rem;
        }
      }



    }

  }


  //确定按钮
  .sure-btn{
    background-image:url('../images/static/btn-bg.png');
    background-size: cover;
    background-position: center;
    line-height:2.5;
    text-align: center;
    background-repeat: no-repeat;
    color:#fff;
    border-radius: .6rem;
    font-size:1.5rem;
  }

}


//订单页面
.page-orders{
  .navs{
    display: flex;
    margin-top:1rem;
    .nav{
      color:#333333;
      line-height:2;
      font-size:1.3rem;
    }

    .nav.active{
      color:#111111;
      font-size:1.4rem;
      font-weight: bold;
      border-bottom:2px solid @red;
    }
  }

  .order-list{
    margin-top:2rem;
    border-radius: .8rem;
    background:#fff;
    padding:1.5rem;
    box-shadow: 1px 1px 3px 5px #eee;
    .nth1{
      display: flex;
    }

    .nth2{
      margin:1rem 0;
      padding:1rem;
      background:#F6F6F6;
      display: flex;
      border-radius: .4rem;
      img{
        height:3rem;
        margin-right:1rem;
      }

      p{
        line-height:3rem;
        font-size:1.2rem
      }

      .gname{color:#333333;}
      .red{color:@red;}
    }

    .nth3{
      p{
        padding:.4rem 0;
      }
      a{
        color:@red;
        text-decoration-line: none;
      }
    }
  }

}


.page-goods{
  img{
    display: block;
    width:100%;
  }
  .container{
    margin-top:2rem;
  }

  .backbtn{
    width:80vw;
    font-size:1.3rem;
    line-height:3;
    margin:2rem auto;
    text-align: center;
    border-radius: .5rem;
    color:#fff;
    background-image: url("../images/static/btn-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}
